<template>
  <div :class="customStyle == 1 ? 'aplayer-controller' : ''">
    <v-progress
      :loadProgress="loadProgress"
      :playProgress="playProgress"
      :theme="theme"
      @dragbegin="val => $emit('dragbegin', val)"
      @dragend="val => $emit('dragend', val)"
      @dragging="val => $emit('dragging', val)"
    />
    <div class="aplayer-time" v-if="customStyle == 1">
      <div class="aplayer-time-inner">
        <span class="aplayer-ptime">{{secondToTime(stat.playedTime)}}</span> /
        <span class="aplayer-dtime">{{secondToTime(stat.duration)}}</span>
      </div>
    </div>
    <div v-else class="aplayer-time1">
      <span class="aplayer-time-txt">{{secondToTime(stat.playedTime)}}</span>
      <span class="aplayer-time-txt">{{secondToTime(stat.duration)}}</span>
    </div>
  </div>
</template>

<script>
  import VProgress from './aplayer-controller-progress.vue'

  export default {
    components: {
      VProgress
    },
    props: ['shuffle', 'repeat', 'stat', 'theme', 'volume', 'muted', 'customStyle'],
    computed: {
      loadProgress () {
        if (this.stat.duration === 0) return 0
        return this.stat.loadedTime / this.stat.duration
      },
      playProgress () {
        if (this.stat.duration === 0) return 0
        return this.stat.playedTime / this.stat.duration
      },
    },
    methods: {
      secondToTime (second) {
        if (isNaN(second)) {
          return '00:00'
        }
        const pad0 = (num) => {
          return num < 10 ? '0' + num : '' + num
        }

        const min = Math.trunc(second / 60)
        const sec = Math.trunc(second - min * 60)
        const hours = Math.trunc(min / 60)
        const minAdjust = Math.trunc((second / 60) - (60 * Math.trunc((second / 60) / 60)))
        return second >= 3600 ? pad0(hours) + ':' + pad0(minAdjust) + ':' + pad0(sec) : pad0(min) + ':' + pad0(sec)
      },
    },
  }
</script>

<style lang="scss">

  .aplayer-controller {
    display: flex;
    align-items: center;
    position: relative;
    .aplayer-time {
      display: flex;
      align-items: center;
      position: relative;
      height: 17px;
      color: #999;
      font-size: 11px;
      padding-left: 7px;

      .aplayer-volume-wrap {
        margin-left: 4px;
        margin-right: 4px;
      }

      .aplayer-icon {
        cursor: pointer;
        transition: all 0.2s ease;
        margin-left: 4px;

        &.inactive {
          opacity: .3;
        }

        .aplayer-fill {
          fill: #666;
        }

        &:hover {
          .aplayer-fill {
            fill: #000;
          }
        }

        &.aplayer-icon-menu {
          display: none;
        }
      }
      .aplayer-volume-wrap + .aplayer-icon {
        margin-left: 0;
      }

      &.aplayer-time-narrow {
        .aplayer-icon-mode {
          display: none;
        }

        .aplayer-icon-menu {
          display: none;
        }
      }
    }
  }
  .aplayer-time1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.05rem;
    .aplayer-time-txt {
      font-size: 0.5rem;
      color: #999999;
      letter-spacing: 0;
    }
  }
</style>